<template>
  <div class="public_eight">
    <div class="public_title">
      <span class="color1" @click="goBack">重要问题</span>
      <!--<span class="color1">/ 出货合格率详情</span>-->
      <span class="color2" v-if="pro.edReport != undefined">/ {{pro.edReport.title}}</span>
    </div>
    <div class="top">
      <div class="top_back">
        <i class="el-icon-arrow-left" @click="goBack"></i><span @click="goBack">返回</span>
      </div>
      <div class="top_title">
        <span class="title_name" v-if="pro.edReport != undefined">{{pro.edReport.title}}</span>
        <div class="labels" v-if="pro.edReport != undefined">
          <div class="label label1" v-if="pro.edReport.level == 1">红色</div>
          <div class="label label2" v-if="pro.edReport.level == 2">橙色</div>
          <div class="label label3" v-if="pro.edReport.level == 3">黄色</div>
          <div class="label label4" v-if="pro.edReport.level == 4">蓝色</div>
          <div class="label label5">{{pro.edReport.target}}</div>
          <div class="label label6" v-if="pro.edReport.category != '' && pro.edReport.category != undefined && pro.edReport.category != null">{{pro.edReport.category}}</div>
        </div>
        <div class="updateSpan" @click="updeteName">点击修改</div>
      </div>
      <div class="nodes">
        <div class="nodeList">
          <div :class="(1 < publicHaveNode)?(0 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(0 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(1 <= publicHaveNode)?(0 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(0)">D0</div>
            <div class="hr"></div>
          </div>
          <div :class="(2 < publicHaveNode)?(1 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(1 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(2 <= publicHaveNode)?(1 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(1)">D1</div>
            <div class="hr"></div>
          </div>
          <div :class="(3 < publicHaveNode)?(2 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(2 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(3 <= publicHaveNode)?(2 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(2)">D2</div>
            <div class="hr"></div>
          </div>
          <div :class="(4 < publicHaveNode)?(3 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(3 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(4 <= publicHaveNode)?(3 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(3)">D3</div>
            <div class="hr"></div>
          </div>
          <div :class="(5 < publicHaveNode)?(4 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(4 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(5 <= publicHaveNode)?(4 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(4)">D4</div>
            <div class="hr"></div>
          </div>
          <div :class="(6 < publicHaveNode)?(5 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(5 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(6 <= publicHaveNode)?(5 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(5)">D5</div>
            <div class="hr"></div>
          </div>
          <div :class="(7 < publicHaveNode)?(6 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(6 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(7 <= publicHaveNode)?(6 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(6)">D6</div>
            <div class="hr"></div>
          </div>
          <div :class="(8 < publicHaveNode)?(7 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(7 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(8 <= publicHaveNode)?(7 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(7)">D7</div>
            <div class="hr"></div>
          </div>
          <div :class="(9 < publicHaveNode)?(8 == publicNowNode?'nodeDiv downDiv chooseDiv':'nodeDiv downDiv'):(8 == publicNowNode?'nodeDiv chooseDiv':'nodeDiv')">
            <div :class="(9 <= publicHaveNode)?(8 == publicNowNode?'node downNode chooseNode':'node downNode'):'node'" @click="chooseNodeClick(8)">D8</div>
          </div>
        </div>
      </div>
    </div>
    <plant v-if="showNewEight" :update8D="update8D" @params="getParams"></plant>
    <router-view></router-view>
    <history v-if="canShowHistory" :historyList="historyList"></history>
  </div>
</template>

<script>
  import plant from '../../important/8D_1'
  import {mapActions,mapGetters} from 'vuex'
  import history from '../eightD/history'
  export default {
    name: "public_eigthD",
    data() {
      return {
        pro: {}, //父类继承过来的详情
        detail:{}, //查询出来的详情
        colorList:[
          {title:'红色',color:'#dc4444',level:'1'},
          {title:'橙色',color:'#ff8c1b',level:'2'},
          {title:'黄色',color:'#ffcd34',level:'3'},
          {title:'蓝色',color:'#3384dd',level:'4'}
        ],
        update8D: [], //修改标题的数组
        historyList: [],
        canShowHistory: false,
      }
    },
    created() {
    },
    computed:{
      ...mapGetters([
        'showNewEight',
        'publicHaveNode',
        'publicNowNode'
      ])
    },
    components:{
      plant,
      history,
    },
    mounted() {
      let self = this
      self.pro = self.$route.query
      if (self.pro.getNew == undefined){
        self.detail = self.searchDetailEightD(self.pro.edReport.reportId[self.pro.edReport.reportId.length - 1])
      } else {
        self.detail = self.searchDetailEightD(self.pro.id)
      }
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //返回
      goBack(){
        let self = this
        self.upstate({key:'showNewEight',val:false})
        self.upstate({key:'showRichText',val:false})
        self.upstate({key:'showAddMember',val:false})
        self.upstate({key:'showJointly',val:false})
        this.$router.push('/index/important')
      },
      //选择进度按钮
      chooseNodeClick(index){
        let self = this
        if (index < self.publicHaveNode) {
          self.upstate({key:'publicNowNode',val:index})
        }
        let id = ''
        let edReportId = ''
        if (self.pro.edDoc != undefined){
          edReportId = self.pro.edDoc.edReportId
        } else {
          edReportId = self.pro.edReportId
        }
        self.getHistory()
        switch (self.publicNowNode) {
          case 0:
            if (self.pro.getNew == undefined){
              id = self.pro.edReport.reportId[0]
            } else {
              id = self.pro.id
            }
            self.$router.push({
              path:'/index/public_eightD/D_zero',
              query: {id:id}
            })
            break
          case 1:
            id = self.pro.edReport.reportId[1]
            self.$router.push({
              path:'/index/public_eightD/D_one',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 2:
            id = self.pro.edReport.reportId[2]
            self.$router.push({
              path:'/index/public_eightD/D_two',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 3:
            id = self.pro.edReport.reportId[3]
            self.$router.push({
              path:'/index/public_eightD/D_three',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 4:
            id = self.pro.edReport.reportId[4]
            self.$router.push({
              path:'/index/public_eightD/D_four',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 5:
            id = self.pro.edReport.reportId[5]
            self.$router.push({
              path:'/index/public_eightD/D_five',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 6:
            id = self.pro.edReport.reportId[6]
            self.$router.push({
              path:'/index/public_eightD/D_six',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 7:
            id = self.pro.edReport.reportId[7]
            self.$router.push({
              path:'/index/public_eightD/D_seven',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
          case 8:
            id = self.pro.edReport.reportId[8]
            self.$router.push({
              path:'/index/public_eightD/D_eight',
              query: {
                id:id,
                edReportId: edReportId,
                pro:self.pro
              }
            })
            break
        }
      },
      //查询8D详情
      searchDetailEightD(id){
        let self = this
        self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
          if (self.pro.getNew == undefined){
            if (self.pro.edReport.reportId.length < 9){
              if (res.data.status == 'close'){
                self.upstate({key:'publicNowNode',val:self.pro.edReport.reportId.length})
                self.upstate({key:'publicHaveNode',val: self.pro.edReport.reportId.length + 1})
                self.chooseNodeClick(self.pro.edReport.reportId.length)
              }else {
                self.upstate({key:'publicNowNode',val:self.pro.edReport.reportId.length})
                self.upstate({key:'publicHaveNode',val: self.pro.edReport.reportId.length})
                self.chooseNodeClick(self.pro.edReport.reportId.length - 1)
              }
            }else if (self.pro.edReport.reportId.length == 9) {
              self.upstate({key:'publicNowNode',val:self.pro.edReport.reportId.length})
              self.upstate({key:'publicHaveNode',val: self.pro.edReport.reportId.length})
              self.chooseNodeClick(self.pro.edReport.reportId.length - 1)
            }
          } else {
            self.pro.edReport = res.data.data
            self.upstate({key:'publicNowNode',val: 0})
            self.upstate({key:'publicHaveNode',val: 1})
            self.chooseNodeClick(0)
          }
        })
      },
      //修改8D名称
      updeteName(){
        let self = this
        self.update8D = self.pro
        self.upstate({key:'showNewEight', val:true})
      },
      //修改标题返回值
      getParams(par){
        let self = this
        let id = ''
        if (self.pro.edReport.reportId != undefined && self.pro.edReport.reportId.length > 0){
          id = self.pro.edReport.reportId[0]
          setTimeout(() => {
            self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
              self.pro.edReport.title = res.data.data.title
              self.pro.edReport.level = res.data.data.level
              self.pro.edReport.target = res.data.data.target
              self.pro.edReport.category = res.data.data.category
              self.update8D = self.pro
            })
          },500)
        } else {
          id = self.pro.id
          self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
            setTimeout(() => {
              self.pro.edReport.title = res.data.data.title
              self.pro.edReport.level = res.data.data.level
              self.pro.edReport.target = res.data.data.target
              self.pro.edReport.category = res.data.data.category
              self.update8D = self.pro
            },50)
          })
        }
      },
      //获取历史记录
      getHistory() {
        let self = this
        let edReportId = ''
        //判断当前是否在D1或者D8，如果在，则不显示历史记录
        if (self.publicNowNode != 1 && self.publicNowNode != 8) {
          self.canShowHistory = true
        } else {
          self.canShowHistory = false
        }
        if (self.pro.edReportId != undefined) {
          edReportId = self.pro.edReportId
        } else if (self.pro.edDoc != undefined) {
          if (self.pro.edDoc.edReportId != undefined && self.pro.edDoc.edReportId != null && self.pro.edDoc.edReportId != '') {
            edReportId = self.pro.edDoc.edReportId
          }
        }
        self.$http.get(self.conURL + 'mongo/api/docs/relations?docid=' + edReportId + '&stage=D' + self.publicNowNode).then(res => {
          self.historyList = res.data
          // console.log(res.data)
        }).catch(error=>{
          console.log(error)
          this.$notify.error({
            title: '错误',
            message: error
          });
          self.upstate({key: 'public_backShow',val: false})
        });
      },
    }
  }
</script>

<style lang="less">
  .public_eight{
    display: flex;
    flex-direction: column;
    padding: 0 62px;
    padding-bottom: 113px;
    box-sizing: border-box;
    .public_title{
      width: 100%;
      height: 63px;
      line-height: 63px;
      font-size: 14px;
      display: flex;
      flex-direction: row;
      .color1{
        color: #666666;
        margin-right: 5px;
      }
      .color2{
        color: #3384dd;
      }
    }
    .top{
      width: 100%;
      background: #f3f6f9;
      border: 1px solid #e5e5e5;
      border-bottom: none;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      .top_back{
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 78px;
        line-height: 78px;
        color: #222222;
        padding: 0 30px;
        box-sizing: border-box;
        .el-icon-arrow-left{
          margin-top: auto;
          margin-bottom: auto;
          cursor: pointer;
          font-weight: 500;
          margin-right: 7px;
        }
        span{
          height: 18px;
          font-size: 18px;
          line-height: 18px;
          cursor: pointer;
          font-weight: 500;
          margin-top: auto;
          margin-bottom: auto;
        }
      }
      .top_title{
        display: flex;
        flex-direction: row;
        padding: 0 30px;
        box-sizing: border-box;
        margin-bottom: 30px;
        .title_name{
          max-width: 65%;
          font-size: 20px;
          color: #333333;
          font-weight: 500;
          margin-right: 20px;
        }
        .labels{
          display: flex;
          flex-direction: row;
          .label{
            height: 22px;
            line-height: 22px;
            text-align: center;
            padding: 2px 5px;
            color: #fff;
            border-radius: 2px;
            margin-right: 6px;
            font-size: 16px;
          }
          .label:last-child{
            margin-right: 30px;
          }
          .label1{
            background: #dc4444;
          }
          .label2{
            background: #ff8c1b;
          }
          .label3{
            background: #ffcd34;
          }
          .label4{
            background: #3384dd;
          }
          .label5{
            background: #3384dd;
          }
          .label6{
            background: rgb(168, 168, 168);
          }
        }
        .updateSpan{
          font-size: 18px;
          color: #3384dd;
          line-height: 22px;
          cursor: pointer;
        }
      }
      .nodes{
        position: relative;
        width: 100%;
        height: 85px;
        padding: 0 30px;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;
        .nodeList{
          display: flex;
          flex-direction: row;
          width: 70%;
          height: 46px;
          .nodeDiv{
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            width: 130px;
            .hr{
              width: 100%;
              height: 3px;
              position: absolute;
              margin: auto;
              top: 0;
              bottom: 0;
              left: 0;
              background: #ececec;
            }
            .node{
              width: 30px;
              height: 30px;
              line-height: 30px;
              border-radius: 50%;
              background: #e4e4e4;
              border: 1px solid #e4e4e4;
              color: #ffffff;
              font-size: 16px;
              text-align: center;
              margin-top: auto;
              margin-bottom: auto;
              z-index: 1;
              position: relative;
              cursor: not-allowed;
            }
            .downNode{
              background: #3384dd;
              border: 1px solid #2778df;
              cursor: pointer;
            }
            .chooseNode{
              width: 46px;
              height: 46px;
              line-height: 46px;
              font-size: 24px;
              background: #51abff;
              border: 1px solid #47a1f4;
              box-shadow: #47a1f4 0px 0px 5px;
              cursor: pointer;
            }
            .chooseNode:after{
              content: '';
              display: block;
              width: 25px;
              height: 25px;
              border-top: 1px solid #e5e5e5;
              border-left: 1px solid #e5e5e5;
              background: #fff;
              transform: rotate(45deg);
              position: absolute;
              left: 20%;
              bottom: -110%;
            }
          }
          .downDiv{
            .hr{
              background: #378bf4;
            }
          }
          .chooseDiv{
            width: 160px;
          }
        }
      }
    }
  }
</style>
